<template>
  <div class="body">
    <div class="top_box">
      <div class="left">
        <div class="box">
          <div class="glass"></div>
          <div class="category">品种：{{ glass.type }}</div>
          <div class="category">
            尺寸: {{ glass.width }}mm*{{ glass.height }}mm
          </div>
        </div>
      </div>
      <div class="right">
        <div class="list">
          <div class="item" v-for="(item, i) in glassData" :key="i">
            <div class="label">
              {{ item.name }}
            </div>
            <div class="vlaue">
              {{ item.value == null ? "未记录" : item.value }}
            </div>
          </div>
          <div class="item">
            <div class="label">操作</div>
            <div class="vlaue">
              <el-button
                type="text"
                slot="reference"
                v-hasPermi="['assembly:glass:edit']"
                @click="handleUpdate(1)"
                >报损</el-button
              >

              <el-button
                style="padding-left: 10%"
                type="text"
                slot="reference"
                @click="handleUpdate(2)"
                v-hasPermi="['assembly:glass:edit']"
                >异常</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-divider><span style="font-weight: 800">玻璃日志</span></el-divider>
    <div class="bootom_box">
      <div class="message">
        <div v-for="item in messageList" :key="item.createTime">
          {{ item.createTime }} : {{ item.jobMessage }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { filterStatus } from "@/utils/glassGroup";
import { abnormal } from "@/api/production/quartz";
import { TimeInterval } from "@/utils/newDate";
import { listJobLog } from "@/api/monitor/jobLog";
export default {
  props: {
    glass: {
      type: Object,
      default: () => {},
    },
    group: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      glassData: [
        {
          name: "ID",
          value: this.glass.id,
        },
        {
          name: "工作单ID",
          value: this.glass.workId,
        },
         {
          name: "流程卡号",
          value: this.glass.optGlass.cardCode,
        },
        {
          name: "理片笼笼号",
          value: this.group || Math.ceil(this.glass.grid / 50),
        },
        {
          name: "理片笼格号",
          value: this.glass.grid - Math.floor(this.glass.grid / 50) * 50,
        },
        {
          name: "订单号",
          value: this.glass.orderid,
        },
        {
          name: "客户信息",
          value: this.glass.clientName,
        },
        {
          name: "识别码",
          value: this.glass.optCodeContext,
        },
        {
          name: "状态",
          value: filterStatus(this.glass.status),
        },
        {
          name: "创建时间",
          value: this.glass.createTime,
        },
        {
          name: "完成时间",
          value: this.glass.updateTime,
        },
        {
          name: "交货日期",
          value: this.glass.optGlass.spareFieldStr7 || "N/A",
        },
        {
          name: "位置",
          value: this.glass.optGlass.spareFieldStr3 || "N/A",
        },
        {
          name: "生产要求",
          value: this.glass.optGlass.spareFieldStr4 || "N/A",
        },
        {
          name: "停留时长",
          value: TimeInterval(
            new Date().getTime() - new Date(this.glass.updateTime).getTime()
          ),
        },
      ],
      messageList: [],
    };
  },
  methods: {
    handleUpdate(state) {
      if (state == 1) {
        this.$openLosses.showDialog([this.glass]);
        this.cloeseDialog();
      } else {
        this.$prompt("请输入密码", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /^5563$/,
          inputErrorMessage: "密码错误",
          inputType: "password",
        })
          .then(({ value }) => {
            abnormal(this.glass.id, state).then((res) => {
              this.$modal.msgSuccess(res.msg);
              this.$store.dispatch("listGlass");
              this.cloeseDialog();
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      }
    },
    cloeseDialog() {
      this.$emit("closeDialog");
    },
    getGlassMessage() {
      listJobLog({ glassId: this.glass.id }).then((res) => {
        this.messageList = res.rows;
      });
    },
  },
  mounted() {
    this.getGlassMessage();
  },
};
</script>

<style scoped lang="scss">
.body {
  width: 100%;
  display: flex;
  flex-direction: column;
  .top_box {
    width: 100%;
    height: 55%;
    display: flex;
    flex-wrap: wrap;
  }
  .left {
    width: 30%;
    border-right: 1px solid #e6e6e6;
    display: flex;
    align-items: center;
    justify-content: center;
    .box {
      transform: translateY(-50%);
    }
    .glass {
      width: 150px;
      height: 75px;
      background-color: #1a9dff;
    }
    .category {
      margin-top: 5px;
      letter-spacing: 1px;
    }
  }
  .right {
    flex: 1;
    .list {
      width: 100%;
      height: 100%;
      .item {
        padding-left: 10px;
        letter-spacing: 1px;
        height: 25px;
        display: flex;
        align-items: center;
        .label {
          width: 120px;
        }
        .vlaue {
          // flex: 1;
          margin-left: auto;
          margin-right: 25px;
          display: flex;
        }
      }
      .item:hover {
        background-color: #e6e6e6;
        cursor: pointer;
      }
    }
  }
  .action {
    min-height: 20px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    border-top: 1px solid #e6e6e6;
  }
  .bootom_box {
    height: 200px;
    width: 100%;
    display: flex;
    flex-direction: column;
    .label {
      font-size: 16px;
      font-weight: bold;
    }
    .message {
      border: 3px solid #e6e6e6;
      border-radius: 5px;
      background-color: #fafafa;
      max-height: 180px;
      height: 180px;
      overflow: auto;
    }
  }
}
::v-deep .el-button--text {
  padding: 3px 0;
  margin-left: 2px;
}
::v-deep .el-button--text:hover {
  text-decoration: underline;
}
::v-deep .el-divider--horizontal {
  margin: 15px 0;
}
</style>
